<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" id="search" onfocus="abc()" onblur="cba()" />
    <button onclick="search()">搜索</button>
    <button onclick="reset()">重置</button>
    <br />
    <br />
    <button onclick="add()" id="add">添加</button>
    <button class="sort" onclick="sort(1)">正序</button>
    <button class="sort" onclick="sort(-1)">倒叙</button>
    <ul id="ul"></ul>
    <script>
      let ul = document.getElementById('ul')
      let arr = ['良哥2', '良哥1', '良哥4', '良哥3']

      let showArr = arr

      let searchArr = []
      function updateList(data) {
        let content = ''
        data.forEach((item, index) => {
          content += `<li>
          <span>${item}</span>
          <button onclick=del(${index})>删除</button>
          <button onclick=change(${index})>修改</button>
          </li>`
        })
        ul.innerHTML = content
      }
      updateList(showArr)
      // 添加
      function add() {
        let i = Math.floor(Math.random() * 100) + 1
        arr.push('良哥' + i)
        updateList(arr)
      }
      // 删除
      function del(i) {
        showArr.splice(i, 1)
        updateList(showArr)
      }
      // 修改
      function change(i) {
        let index = i + 1
        showArr.splice(i, 1, '良弟' + index)
        updateList(showArr)
      }
      // 排序
      function sort(type) {
        showArr.sort((item, item1) => {
          let index = item.slice(2, item.length)
          let index2 = item1.slice(2, item1.length)
          return type > 0 ? index - index2 : index2 - index
        })
        updateList(showArr)
      }
      // 查找
      function search() {
        let search = document.getElementById('search').value
        searchArr = arr.filter((item) => {
          return item.indexOf(search) != -1
        })
        showArr = searchArr
        updateList(showArr)
      }
      // 重置
      function reset() {
        showArr = arr
        updateList(showArr)
      }
      //
      function abc() {
        console.log(1)
      }
      //
      function cba() {
        console.log(2)
      }
    </script>
  </body>
</html>
